.rendered-markdown
  color: rgba(0, 0, 0, 0.87)
  line-height: 1.6
  font-family: 'color-emoji' -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'

  p
    text-align: left
    font-size: 1em
    line-height: 1.75
    margin: 0px
    margin-bottom: 1em
    word-break: break-word
    white-space: pre-line

  code
    background-color: #eee
    color: #2e2e2e
    padding: 1px 5px
    margin: 0 3px
    border-radius: 5px

    &:first-child
      margin-left: 0

  pre
    border-radius: 6px
    padding: 8px 12px
    background: rgba(140, 166, 192, 0.1)
    margin: 8px 0
    font-size: 0.875em
    overflow: auto

    > code
      background: none
      margin: 0
      padding: 0
      border-radius: 0
      color: inherit

  em
    font-style: italic

  strong
    font-weight: bold

  u
    text-decoration: underline

  a:not(.text-link)
    text-decoration: none
    color: #1976d2

    &:hover
      text-decoration: underline
      color: #1976d2

    &:visited
      text-decoration: none
      color: #1976d2

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    line-height: 1
    font-weight: 500
    font-style: normal
    margin: 1.2em 0 0.8em 0

    &:first-child
      margin-top: calc(0.5 * 1.2em)

    &:last-child
      margin-bottom: calc(0.5 * 0.8em)

  h1
    font-size: 1.75em

  h2
    font-size: 1.5em

  h3
    font-size: 1.25em

  h4
    font-size: 1em

  h5
    font-size: 0.875em

  h6
    font-size: 0.75em

  // Lists
  ul:not(.list-inline),
  ol:not(.list-inline)
    padding-left: 2em

  ul
    list-style: disc

  ul ul
    list-style: square

  ul ul ul
    list-style: circle

  ol
    list-style: decimal

  ol ol
    list-style: upper-alpha

  ol ol ol
    list-style: lower-alpha

  ol ol ol ol
    list-style: lower-roman

  ol ol ol ol ol
    list-style: decimal

  ol,
  ul
    margin-bottom: 1em
    line-height: 2

  ul ul,
  ul ol,
  ol ul,
  ol ol
    margin-bottom: 0em

  hr
    color: #e0e0e0
    background-color: #bdbdbd
    margin-top: 1em
    margin-bottom: 1em

  table
    border-collapse: collapse
    border-spacing: 0
    border: none
    color: rgba(0, 0, 0, 0.87)
    font-size: 0.875em
    table-layout: fixed
    margin-left: auto
    margin-right: auto
    margin-bottom: 1em

  thead
    border-bottom: 1px solid #bdbdbd
    vertical-align: bottom

  td,
  th,
  tr
    vertical-align: middle
    padding: 0.5em 0.5em
    line-height: normal
    white-space: normal
    max-width: none
    border: none

  td,
  th
    max-width: none

  th
    font-weight: bold

  tbody tr:nth-child(odd)
    background: #fff

  tbody tr:nth-child(even)
    background: #f5f5f5

  tbody tr:hover
    background: #e1f5fe

  img
    -moz-force-broken-image-icon: 1

  // Restrict to direct children as other images could be nested in other content.
  & > img
    display: block
    margin-left: auto
    margin-right: auto
    margin-bottom: 1em

  img,
  svg
    height: auto
    max-width: 80%
    margin: 10px auto 10px
    display: inline-block

  // &.jp-mod-unconfined
  //   max-width: none

  // .alert
  //   padding: 10px
  //   border: 1px solid transparent
  //   border-radius: 2px
  //   margin-bottom: 1em

  // .alert-info
  //   color: #0097a7
  //   background-color: #b2ebf2
  //   border-color: #4dd0e1

  // .alert-info hr
  //   border-color: #b2ebf2

  // .alert-info > p:last-child,
  // .alert-info > ul:last-child
  //   margin-bottom: 0

  // .alert-warning
  //   color: #f57c00
  //   background-color: #ffe0b2
  //   border-color: #ffb74d

  // .alert-warning hr
  //   border-color: #ffe0b2

  // .alert-warning > p:last-child,
  // .alert-warning > ul:last-child
  //   margin-bottom: 0

  // .alert-success
  //   color: #388e3c
  //   background-color: #c8e6c9
  //   border-color: #81c784

  // .alert-success hr
  //   border-color: #c8e6c9

  // .alert-success > p:last-child,
  // .alert-success > ul:last-child
  //   margin-bottom: 0

  // .alert-danger
  //   color: #d32f2f
  //   background-color: #ffcdd2
  //   border-color: #e57373

  // .alert-danger hr
  //   border-color: #ffcdd2

  // .alert-danger > p:last-child,
  // .alert-danger > ul:last-child
  //   margin-bottom: 0

  blockquote
    margin: 1em 2em
    padding: 0 1em
    border-left: 5px solid #e0e0e0

  kbd
    background-color: #f5f5f5
    border: 1px solid #bdbdbd
    border-bottom-color: #e0e0e0
    border-radius: 3px
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25)
    display: inline-block
    font-size: 0.8em
    line-height: 1em
    padding: 0.2em 0.5em

  // Most direct children of .rendered-markdown have a margin-bottom of 1.0.
  // At the bottom of cells this is a bit too much as there is also spacing
  // between cells. Going all the way to 0 gets too tight between markdown and
  // code cells.
  & > *:last-child
    margin-bottom: 0.5em

  .katex-display
    *, *::before, *::after
      border-color: black
